<template>
  <a-form-model ref="form_" :model="model.supplier" :rules="validatorRules_" slot="detail">
    <div class="sku-title" style="margin-bottom: 20px;">
      供应商信息
      <a-button type="primary" @click="handleSkuSupplier" style="margin-left: 10px;">供应商选择</a-button>
    </div>
    <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 },sm: { span: 24 }}" :validate-status="supplierValid.validateStatus" :help="supplierValid.message">
      <a-table
        style="width: 100%;"
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="table.columns"
        :dataSource="table.dataSource"
        :pagination="false"
        class="j-table-force-nowrap">
        <template slot="supplierStatusSlot" slot-scope="text, record">
          <a-tag :color="getColor(record)" v-if="text">{{ text }}</a-tag>
        </template>
      </a-table>
    </a-form-model-item>
    <a-row>
      <a-col :span="8">
        <a-form-model-item label="采购链接" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purchaseLink">
          <a-input v-model="model.supplier.purchaseLink" placeholder="请输入采购链接" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="拿货价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purchasePrice">
          <a-input-number :precision="2" v-model="model.supplier.purchasePrice" placeholder="请输入拿货价" style="width: 100%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="采购周期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purchaseCycle">
          <a-input v-model.trim="model.supplier.purchaseCycle" placeholder="请输入采购周期"  ></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item label="开发议价截图" :labelCol="labelCol" :wrapperCol="{ xs: { span: 24 },sm: { span: 24 }}" prop="negotiationImages">
          <j-upload-oss v-model="model.supplier.negotiationImages" fileType="image" bizPath="product" style="width: 100%;"></j-upload-oss>
        </a-form-model-item>
      </a-col>
    </a-row>

    <product-library-sku-child-modal ref="modalForm" @ok="modalFormOk"></product-library-sku-child-modal>
  </a-form-model>
</template>

<script>
import { productMixins } from '@/views/productLibrary/mixins/productMixins'
import ProductLibrarySkuChildModal from '@/views/productLibrary/modules/ProductLibrarySkuChildModal'
export default {
  name: 'SkuSupplier',
  mixins:[productMixins],
  components: {
    ProductLibrarySkuChildModal
  },
  props: {
    model: {
      type: Object,
      default: () => {}
    }
  },
  data(){
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      validatorRules_: {},
      supplierValid: {
        validateStatus: '',
        message: ''
      },
      table: {
        dataSource: [],
        columns: [
          {
            title:'供应商编号',
            align:"center",
            dataIndex: 'code'
          },
          {
            title:'供应商名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title:'付款方式',
            align:"center",
            dataIndex: 'paymentMethod_dictText'
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'supplierStatus_dictText',
            scopedSlots: { customRender: 'supplierStatusSlot' }
          }
        ]
      },
      url: {
        queryBySkuId: "/hzkj-product/product/productLibrary/skuSupplier/queryBySkuId",
      }
    }
  },
  watch: {
    model: {
      immediate: true,
      handler(val){
        if(val.supplier && val.supplier.supplier && Object.keys(val.supplier.supplier) && Object.keys(val.supplier.supplier).length){
          val.supplier.supplier.paymentMethod_dictText = this.getPaymentMethod(val);
          val.supplier.supplier.supplierStatus_dictText = this.getSupplierStatus(val);
          this.table.dataSource = [val.supplier.supplier] || [];
        }
      }
    }
  },
  inject: ["productSupplierStatusList", "productSupplierPaymentMethodList"],
  methods: {
    handleSkuSupplier(){
      this.$refs.modalForm.edit(this.model);
      this.$refs.modalForm.title = "供应商选择";
      this.$refs.modalForm.disableSubmit = false;
    },
    modalFormOk(selectionRows){
      this.table.dataSource = selectionRows;
      this.model.supplier = {
        purchaseLink: this.model.supplier.purchaseLink,
        purchasePrice: this.model.supplier.purchasePrice,
        purchaseCycle: this.model.supplier.purchaseCycle,
        negotiationImages: this.model.supplier.negotiationImages,
        supplierId: selectionRows[0].id
      }
      this.supplierValid = {
        validateStatus: '',
        message: ''
      }
    },
    getSupplierList(){
      return new Promise((resolve, reject) => {
        if(!(this.table.dataSource && this.table.dataSource.length)){
          this.supplierValid = {
            validateStatus: 'error',
            message: '请添加供应商!'
          }
          resolve(false);
        }else{
          resolve(true);
        }
      })
    },
    getSupplierStatus(record){
      if(!(record.supplier && record.supplier.supplier && record.supplier.supplier.supplierStatus)) return '';
      return (this.productSupplierStatusList().find(item => item.value == record.supplier.supplier.supplierStatus) || {}).text;
    },
    getPaymentMethod(record){
      if(!(record.supplier && record.supplier.supplier && record.supplier.supplier.paymentMethod)) return '';
      return (this.productSupplierPaymentMethodList().find(item => item.value == record.supplier.supplier.paymentMethod) || {}).text;
    }
  }
}
</script>